1import {useState, useReducer, PropsWithChildren} from 'react';
  2import Box from '@mui/material/Box';
  3import {useTheme} from '@mui/material/styles';
  4import {useTranslation} from 'react-i18next';
  5import {getSession, useSession} from 'next-auth/react';
  6import TravelColumns from '../../../containers/TravelColumns';
  7import NewTravelDialog from '../../../containers/NewTravelDialog';
  8import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
  9import Fab from '../../../containers/Fab';
 10import pageUtils from '../../../lib/pageUtils';
 11import EventLayout, {TabComponent} from '../../../layouts/Event';
 12import {
 13  EventByUuidDocument,
 14  FindUserVehiclesDocument,
 15  useFindUserVehiclesQuery,
 16} from '../../../generated/graphql';
 17
 18interface Props {
 19  eventUUID: string;
 20  announcement?: string;
 21}
 22
 23const Page = (props: PropsWithChildren<Props>) => {
 24  return <EventLayout {...props} Tab={TravelsTab} />;
 25};
 26
 27const TravelsTab: TabComponent = () => {
 28  const {t} = useTranslation();
 29  const theme = useTheme();
 30  const session = useSession();
 31  const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
 32  const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
 33
 34  const isAuthenticated = session.status === 'authenticated';
 35  const {data} = useFindUserVehiclesQuery({
 36    skip: !isAuthenticated,
 37  });
 38  const vehicles = data?.me?.profile?.vehicles?.data || [];
 39
 40  const addTravelClickHandler =
 41    isAuthenticated && vehicles?.length != 0
 42      ? toggleVehicleChoice
 43      : () => toggleNewTravel({opened: true});
 44
 45  return (
 46    <Box>
 47      <TravelColumns toggle={addTravelClickHandler} />
 48      <Fab
 49        onClick={addTravelClickHandler}
 50        aria-label="add-car"
 51        color="primary"
 52        sx={{
 53          bottom: 0,
 54          right: theme.spacing(6),
 55
 56          [theme.breakpoints.down('md')]: {
 57            right: theme.spacing(1),
 58            bottom: 56,
 59          },
 60        }}
 61      >
 62        {t('travel.creation.title')}
 63      </Fab>
 64      <NewTravelDialog
 65        context={openNewTravelContext}
 66        toggle={() => toggleNewTravel({opened: false})}
 67      />
 68      <VehicleChoiceDialog
 69        open={openVehicleChoice}
 70        toggle={toggleVehicleChoice}
 71        toggleNewTravel={toggleNewTravel}
 72        vehicles={vehicles}
 73      />
 74    </Box>
 75  );
 76};
 77
 78export const getServerSideProps = pageUtils.getServerSideProps(
 79  async (context, apolloClient) => {
 80    const {uuid} = context.query;
 81    const {host = ''} = context.req.headers;
 82    const session = await getSession(context);
 83    let event = null;
 84
 85    // Fetch event
 86    try {
 87      const {data} = await apolloClient.query({
 88        query: EventByUuidDocument,
 89        variables: {uuid},
 90      });
 91      event = data?.eventByUUID?.data;
 92    } catch (error) {
 93      return {
 94        notFound: true,
 95      };
 96    }
 97
 98    // Fetch user vehicles
 99    if (session)
100      await apolloClient.query({
101        query: FindUserVehiclesDocument,
102      });
103
104    return {
105      props: {
106        eventUUID: uuid,
107        metas: {
108          title: event?.attributes?.name || '',
109          url: `https://${host}${context.resolvedUrl}`,
110        },
111      },
112    };
113  }
114);
115
116export default Page;